<!--
 *                        .::::.
 *                      .::::::::.
 *                     :::::::::::
 *                  ..:::::::::::'
 *               '::::::::::::'
 *                 .::::::::::
 *            '::::::::::::::..
 *                 ..::::::::::::.
 *               ``::::::::::::::::
 *                ::::``:::::::::'        .:::.
 *               ::::'   ':::::'       .::::::::.
 *             .::::'      ::::     .:::::::'::::.
 *            .:::'       :::::  .:::::::::' ':::::.
 *           .::'        :::::.:::::::::'      ':::::.
 *          .::'         ::::::::::::::'         ``::::.
 *      ...:::           ::::::::::::'              ``::.
 *     ````':.          ':::::::::'                  ::::..
 *                        '.:::::'                    ':'````..
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-18 18:01:31
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-22 12:24:42
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <div class="app-container">
    <div class="product-info">
      <div class="img">
        <img
          src="https://fontdo-rcs.oss-cn-shenzhen.aliyuncs.com/76ee3de97a1b8b903319b7c013d8c877/passport/user/identity/0343a94885ae4db8bb75a07ce214db58.jpeg"
        />
      </div>
      <div class="info">
        <h1>机器人</h1>
        <div class="desc">平台提供的智能机器人服务，按功能收费，998元/月</div>
        <div class="sales">
          <svg-icon icon-class="fire" class="icon"></svg-icon>
          已售数量：7
        </div>
      </div>
    </div>
    <el-card class="box-card" header="资费信息" shadow="never">
      <div class="card-item">
        <div class="label">单价：</div>
        <div class="cont"><span class="error">￥998</span></div>
      </div>
      <div class="card-item">
        <div class="label">有效期：</div>
        <div class="cont">30天</div>
      </div>
      <div class="card-item">
        <div class="label"></div>
        <div class="cont">
          <el-button
            style="width: 120px"
            type="primary"
            @click="$router.push(`/account/shopping/pay/${$route.params.id}`)"
          >
            <svg-icon icon-class="shopping" />
            立即购买
          </el-button>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" header="基本介绍" shadow="never">
      <div style="font-size: 14px">
        平台提供的智能机器人服务，按功能收费，998/月
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'ShoppingDetail',
  data() {
    return {}
  },
  created() {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.product-info {
  display: flex;
  .img {
    width: 240px;
    height: 150px;
    border: 1px solid #f0f0f0;
    text-align: center;
    border-radius: 4px;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
  font-size: 14px;
  h1 {
    margin: 8px 0 0;
    font-weight: 600;
    font-size: 20px;
  }
  .info {
    margin-left: 20px;
  }
  .desc {
    margin: 16px 0;
    color: rgba(0, 0, 0, 0.45);
  }
  .sales {
    .icon {
      color: red;
      font-size: 16px;
    }
  }
}
.box-card {
  margin-top: 20px;
  .card-item {
    display: flex;
    padding: 10px 0;
    .error {
      color: red;
      font-size: 20px;
    }
    .label {
      width: 120px;
      text-align: right;
      color: rgba(0, 0, 0, 0.45);
    }
  }
}
</style>
